<h2>Autocomplete</h2>
<mat-autocomplete>
  <mat-option>Grace Hopper</mat-option>
  <mat-option>Anita Borg</mat-option>
  <mat-option>Ada Lovelace</mat-option>
</mat-autocomplete>

<h2>Button</h2>

<button mat-button>go</button>
<button mat-icon-button><mat-icon>search</mat-icon></button>
<button mat-raised-button>go</button>
<button mat-fab><mat-icon>home</mat-icon></button>
<button mat-mini-fab><mat-icon>favorite</mat-icon></button>

<a mat-button href="https://google.com">Google</a>
<a mat-icon-button href="https://google.com"><mat-icon>search</mat-icon></a>
<a mat-raised-button href="https://google.com">Google</a>
<a mat-fab href="https://google.com"><mat-icon>home</mat-icon></a>
<a mat-mini-fab href="https://google.com"><mat-icon>favorite</mat-icon></a>

<h2>MDC card</h2>

<mat-card>
  Simple card
</mat-card>

<mat-card>
  <mat-card-title>Complicated card</mat-card-title>
  <mat-card-subtitle>Subtitle</mat-card-subtitle>
  <mat-card-content>
    <p>This is some stuff</p>
    <p>And more stuff</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
  <mat-card-footer>
    Hurray
  </mat-card-footer>
</mat-card>

<h2>MDC checkbox</h2>

<mat-checkbox></mat-checkbox>
<mat-checkbox checked></mat-checkbox>
<mat-checkbox checked disabled></mat-checkbox>
<mat-checkbox indeterminate></mat-checkbox>
<mat-checkbox>with a label</mat-checkbox>

<h2>MDC chips</h2>

<mat-chip-set>
  <mat-basic-chip>Basic Chip 1</mat-basic-chip>
  <mat-basic-chip>Basic Chip 2</mat-basic-chip>
  <mat-basic-chip>Basic Chip 3</mat-basic-chip>
</mat-chip-set>

<mat-chip-listbox>
  <mat-chip-option>Extra Small</mat-chip-option>
  <mat-chip-option>Small</mat-chip-option>
  <mat-chip-option>Medium</mat-chip-option>
  <mat-chip-option>Large</mat-chip-option>
</mat-chip-listbox>

<h2>MDC menu</h2>
<button mat-button [matMenuTriggerFor]="menu">Open</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Mercy</button>
  <button mat-menu-item>Lucio</button>
  <button mat-menu-item disabled>Sombra</button>
</mat-menu>

<h2>MDC Radio buttons</h2>

<h3>MDC Radio group</h3>
<mat-radio-group>
  <mat-radio-button>Charmander</mat-radio-button>
  <mat-radio-button>Squirtle</mat-radio-button>
  <mat-radio-button>Bulbasaur</mat-radio-button>
</mat-radio-group>

<h3>MDC Standalone radios</h3>
<mat-radio-button name="onions">White</mat-radio-button>
<mat-radio-button name="onions">Yellow</mat-radio-button>
<mat-radio-button name="onions">Green</mat-radio-button>
<mat-radio-button name="onions" disabled>Red</mat-radio-button>

<h2>MDC Select</h2>
<mat-form-field>
  <mat-select value="ceramic">
    <mat-option value="glass">Glass</mat-option>
    <mat-option value="ceramic">Ceramic</mat-option>
    <mat-option value="steel">Steel</mat-option>
  </mat-select>
</mat-form-field>

<h2>MDC slide-toggle</h2>

<mat-slide-toggle></mat-slide-toggle>
<mat-slide-toggle checked></mat-slide-toggle>
<mat-slide-toggle checked disabled></mat-slide-toggle>
<mat-slide-toggle>with a label</mat-slide-toggle>

<h2>MDC Slider</h2>
<mat-slider></mat-slider>
<mat-slider value="50"></mat-slider>
<mat-slider tickInterval="1" min="1" max="10" value="5" thumbLabel></mat-slider>
<mat-slider disabled></mat-slider>

<h2>MDC Tabs</h2>

<!--
  Note that we set the `selectedIndex` here to hit the code path
  where we might need to do some measurements.
-->
<mat-tab-group [selectedIndex]="1">
  <mat-tab label="Overview">
    The overview
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      API docs
    </ng-template>
    The API docs
  </mat-tab>
</mat-tab-group>

<nav mat-tab-nav-bar>
 <a mat-tab-link href="https://google.com">Google</a>
 <a mat-tab-link href="https://google.com" [active]="true">Also Google</a>
</nav>

<h2>MDC Paginator</h2>

<mat-paginator [length]="100"
               [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

<h2>MDC Table</h2>
<table mat-table [dataSource]="[1, 2, 3]">
  <ng-container matColumnDef="first-column">
    <th mat-header-cell *matHeaderCellDef> First </th>
    <td mat-cell *matCellDef="let data"> {{data}} </td>
  </ng-container>
  <ng-container matColumnDef="second-column">
    <th mat-header-cell *matHeaderCellDef> Second </th>
    <td mat-cell *matCellDef="let data"> {{data}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['first-column', 'second-column']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['first-column', 'second-column'];"></tr>
</table>




<h2>MDC Progress bar</h2>
<mat-progress-bar [value]="25"></mat-progress-bar>
<mat-progress-bar mode="buffer" [value]="25" [bufferValue]="60"></mat-progress-bar>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
<mat-progress-bar mode="query"></mat-progress-bar>

<h2>MDC Form field</h2>
<mat-form-field>
  <mat-label>Label</mat-label>
  <input matInput value="Initial value">
</mat-form-field>
<mat-form-field>
  <input matInput placeholder="Placeholder">
</mat-form-field>
<mat-form-field floatLabel="always">
  <mat-label>Always floating</mat-label>
  <input matInput>
</mat-form-field>
<mat-form-field appearance="outline">
  <mat-label>Label</mat-label>
  <input matInput>
</mat-form-field>
<mat-form-field>
  <mat-label>Label</mat-label>
  <textarea matInput></textarea>
</mat-form-field>
<mat-form-field appearance="outline">
  <mat-label>Label</mat-label>
  <textarea matInput></textarea>
</mat-form-field>
<mat-form-field appearance="outline">
  <mat-label>Label</mat-label>
  <input matInput value="Initial">
</mat-form-field>

<h3>Prefix and Suffix</h3>
<mat-form-field appearance="outline">
  <span matPrefix>+123&nbsp;</span>
  <mat-label>Phone Number</mat-label>
  <input matInput>
</mat-form-field>
<mat-form-field>
  <span matPrefix>+123&nbsp;</span>
  <mat-label>Phone Number</mat-label>
  <input matInput>
</mat-form-field>
<mat-form-field appearance="outline">
  <span matPrefix>+123&nbsp;</span>
  <mat-label>Phone Number</mat-label>
  <input matInput>
</mat-form-field>
<mat-form-field appearance="outline">
  <mat-icon matPrefix>calendar_today</mat-icon>
  <mat-label>Name</mat-label>
  <input matInput>
</mat-form-field>
<mat-form-field>
  <mat-icon matPrefix>calendar_today</mat-icon>
  <mat-label>Name</mat-label>
  <input matInput>
</mat-form-field>

<h2>MDC Progress spinner</h2>
<mat-progress-spinner [value]="25"></mat-progress-spinner>
<mat-spinner></mat-spinner>
<mat-progress-spinner mode="indeterminate" [diameter]="37"></mat-progress-spinner>
<mat-spinner [strokeWidth]="4"></mat-spinner>

<h2>List</h2>
<mat-list>
  <mat-list-item>Robot</mat-list-item>
  <mat-list-item>Android</mat-list-item>
  <mat-list-item>Cyborg</mat-list-item>
</mat-list>

<mat-nav-list>
  <a mat-list-item href="https://google.com">Search</a>
  <a mat-list-item href="https://google.com">Find</a>
  <a mat-list-item href="https://google.com">Seek</a>
</mat-nav-list>

<mat-action-list>
  <button mat-list-item>First action</button>
  <button mat-list-item>Second action</button>
  <button mat-list-item>Third action</button>
</mat-action-list>

<mat-selection-list>
  <h3 mat-subheader>Groceries</h3>
  <mat-list-option value="apples">Apples</mat-list-option>
  <mat-list-option value="bananas">Bananas</mat-list-option>
  <mat-list-option value="oranges">Oranges</mat-list-option>
</mat-selection-list>
